﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="IndexStart.aspx.cs" Inherits="HJT212_Protocol_WebHostClient.IndexStart" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link rel="stylesheet" type="text/css" href="Content/themes/base/jquery.ui.all.css" />
    <script type="text/javascript" src="Scripts/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="Scripts/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="Scripts/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript" src="Scripts/jQuery.timer1.2.js"></script>
    <script type="text/javascript" src="Scripts/Common.js"></script>
    <link rel="stylesheet" type="text/css" href="Content/default/easyui.css" />
    <link rel="stylesheet" type="text/css" href="Content/icon.css" />
    <link rel="stylesheet" type="text/css" href="Content/demo.css" />
    <script src="Content/ui/jquery.ui.core.js"></script>
    <script src="Content/ui/jquery.ui.widget.js"></script>
    <script src="Content/ui/jquery.ui.button.js"></script>
    <link rel="stylesheet" type="text/css" href="Content/themes/sites.css" />
    <script>
        $(function () {
            $("input:submit, a, button", ".demo").button();
            $("a", ".demo").click(function () { return false; });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div style="border: solid 1px gray; width: 904px; height: 400px; margin: -200px 0 0 -150px;
        position: absolute; top: 40%; left: 30%;">
        <div style="border: solid 1px gray; width: 400px; height: 400px; margin: 0; float: left;
            position: relative;">
            <table id="test"></table>
        </div>
        <div style="border: solid 1px gray; width: 500px; height: 400px; margin: 0; float: left;
            position: relative;">
            <asp:Panel ID="Panel1" runat="server" Style="width: 480px; height: 20px; margin-left: 20px;
                margin-top: 20px; font-size: 15px !important;">
                信息显示：
                <asp:Label ID="labMsg" runat="server" Text="" Style="font-size: 10px !important;"></asp:Label>
                <asp:Panel ID="Panel2" runat="server">
                    <asp:TextBox ID="txtBoxContent" runat="server" Height="62px" Width="452px" TextMode="MultiLine"></asp:TextBox>
                </asp:Panel>
            </asp:Panel>
            <div class="demo" style="position: relative; margin-left: 10px; top: 30%; font-size: 15px !important;">
                发送信息：
                <asp:TextBox ID="txtMsgToSend" runat="server" Height="62px" Width="452px" TextMode="MultiLine"></asp:TextBox>
            </div>
            <div class="demo" style="position: relative; top: 40%;">
                <div style="width: 109px; margin: 0; float: left; padding-left: 70px; font-size: 15px !important;">
                    <asp:Button ID="btnConn" runat="server" OnClick="btnConn_Click" Text="连接" Height="48px"
                        Width="80px" />
                </div>
                <div style="width: 220px; float: left; margin: 0; font-size: 15px !important;">
                    <asp:Button ID="btnSend" runat="server" OnClick="btnSend_Click" Text="发送消息" Height="48px"
                        Width="100px" OnClientClick="return goSendMsg();" />
                    <input type="hidden" id="selcedMN" name="selcedMN" value="444" />
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <asp:Button ID="btnStop" runat="server" Text="停止" Height="48px" Width="80px" Enabled="False" />
                </div>
            </div>
        </div>
    </div>
    </form>
    <script type="text/javascript">
        function GetData() {
            $('#test').datagrid({
                title: '数采仪在线状态',
                iconCls: 'icon-save',
                width: 400,
                height: 400,
                nowrap: true,
                striped: true,
                collapsible: false,
                url: 'http://localhost:11545/GetClientList.ashx?Type=ClientList',
                sortName: 'OnLineState',
                sortOrder: 'desc',
                remoteSort: false,
                singleSelect: true,
                columns: [[
                    { field: 'MN', title: 'MN号', width: 120, align: 'left' },
                    { field: 'MCNName', title: '站点名称', width: 180 },
                    {
                        field: 'OnLineState', title: '在线状态', width: 50,
                        formatter: function (value, rec) {
                            if (value == 2) {
                                return '在线';
                            }
                            else {
                                return '离线';
                            }
                        },
                        styler: function (value, row, index) {
                            if (value == 2) {
                                return 'color:green;';
                            }
                            else {
                                return 'color:gray;';
                            }
                        }
                    }
                ]],
                rowStyler: function (index, row, css) {
                    if (row.OnLineState == 2) {
                        return 'font-weight:bold;';
                    }
                    else {
                        return 'color:gray;';
                    }
                },
                pagination: true,
                pageSize: 12,
                pageList: [5, 8, 12, 20, 35, 50],
                rownumbers: true,
                pageNumber: 1
            });
        }


        $(document).ready(function () {
            GetData();
        });
        $('body').everyTime('30s', function () {
            GetData();
        });

        function getSelected() {
            var selected = $('#test').datagrid('getSelected');
            if (selected) {
                debugger;
                if (selected.OnLineState != 2) {
                    alert("【" + selected.MCNName + "】不在线，指令将在数采仪上线之后发送");
                    //    return false;
                }
                $('#selcedMN').val(selected.MN);
                return true;
                //alert(selected.MN + ":" + selected.MCNName + ":" + selected.OnLineState);
            }
            else {
                showMsg("提示", "请选择要发送的现场机", true);
                return false;
            }
            //return false;
        }

        function goSendMsg() {
            if (!getSelected()) return false;
            var mn = $('#selcedMN').val();
            var txtMsg = $('#txtMsgToSend').val();
            if (mn.length == 0) {
                showMsg("提示", "请选择要发送的现场机", true);
                return false;
            }

            if (txtMsg.length == 0) {
                showMsg("提示", "请输入要发送的内容", true);
                return false;
            }
            showProcess(true, '温馨提示', '正在提交数据...');
            $.ajax({
                type:"post",
                url: "CommandHandler.ashx",
                data: { selcedMN: mn, txtMsgToSend: txtMsg, cmdType: "send" }, //数据
                timeout: 5000,//超时时间设定
                error: function() {
                    showProcess(false);
                    $.messager.alert('提示', '发送失败！', 'error');
                    $('#selcedMN').val("");
                },//错误处理
                global:false,
                success: function (result) {
                    showProcess(false);
                    $.messager.alert('提示', result, 'info');
                    $('#selcedMN').val("");
                }
            }); //成功的回调函数
            return false;
        }


        function GetShowMsg() {
            $.get("CommandHandler.ashx", { cmdType: "showmsg" }, function (result) {
                debugger;
                $('#txtBoxContent').val(result);
            });
        }
        $('body').everyTime('200ms', function () {
            GetShowMsg();
        });
        
    </script>
</body>
</html>
